<template>
  <div class="container">
    <!-- 首页顶部内容 -->
    <div class="container-top">
      <!-- 顶部导航 -->
      <div class="container-nav">
        <div class="container-nav-left">
          <div class="container-item">
            <div class="class-item-yellow">
              <svg
                width="22"
                height="23"
                viewBox="0 0 22 23"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                class="icon-bg--icon"
              >
                <path
                  d="M6.41659 15.625C3.88528 15.625 1.83325 13.7782 1.83325 11.5H10.9999C10.9999 13.7782 8.94789 15.625 6.41659 15.625Z"
                  stroke="white"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></path>
                <path
                  d="M15.125 16.0827C15.125 18.614 13.2782 20.666 11 20.666L11 11.4993C13.2782 11.4993 15.125 13.5514 15.125 16.0827Z"
                  stroke="white"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></path>
                <path
                  d="M6.875 6.91667C6.875 9.44797 8.72183 11.5 11 11.5L11 2.33333C8.72182 2.33333 6.875 4.38536 6.875 6.91667Z"
                  stroke="white"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></path>
                <path
                  d="M15.5833 7.375C13.052 7.375 11 9.22183 11 11.5H20.1667C20.1667 9.22183 18.1146 7.375 15.5833 7.375Z"
                  stroke="white"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></path>
              </svg>
            </div>
            <span>动态</span>
          </div>

          <div class="container-item">
            <div class="class-item-red">
              <svg
                width="22"
                height="22"
                viewBox="0 0 22 22"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                class="icon-bg--icon"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M4.89054 17.272L4.89277 17.2742C6.49674 18.8782 8.66472 19.7888 10.9624 19.7888C13.2503 19.7888 15.2113 19.0539 16.6107 17.6108L16.6108 17.6108L16.6128 17.6086C18.0002 16.1345 18.7835 14.182 18.7421 12.1819C18.7852 11.3835 18.6916 9.36321 17.4088 6.75488L17.4082 6.7537C17.209 6.35523 16.8163 6.06598 16.3391 5.96993C15.8904 5.87103 15.4021 6.01997 15.061 6.35741C14.9094 6.48781 14.7796 6.61755 14.6655 6.7317L14.6637 6.73348L14.6329 6.76426C14.2107 3.35588 12.6083 1.7368 11.1654 1.00465C11.148 0.987812 11.1265 0.967972 11.1036 0.950782C11.0775 0.931205 11.0311 0.900467 10.9694 0.888912C10.2276 0.608301 9.41043 1.01168 9.1237 1.77629L9.12314 1.7778C8.50566 3.46558 7.35287 4.62281 6.16627 5.76704C4.51756 7.33121 2.75938 9.03623 2.80163 12.093C2.75906 14.055 3.54464 15.8826 4.89054 17.272ZM3.04999 13.0648C3.01092 12.7459 2.99439 12.4218 3.00168 12.0939C2.95933 9.12977 4.6531 7.47834 6.30453 5.9116C7.49017 4.76831 8.67581 3.58267 9.31098 1.84655C9.56504 1.16904 10.2849 0.830288 10.9201 1.08435C10.9624 1.08435 11.0048 1.1267 11.0471 1.16904C11.9267 1.60884 12.8853 2.39635 13.5753 3.77299C12.8853 2.39633 11.9267 1.6088 11.0471 1.16901C11.0047 1.12666 10.9624 1.08432 10.9201 1.08432C10.2849 0.830251 9.56503 1.16901 9.31097 1.84651C8.6758 3.58263 7.49016 4.76827 6.30452 5.91157C4.65309 7.47831 2.95932 9.12973 3.00166 12.0938C2.99438 12.4218 3.01092 12.7459 3.04999 13.0648ZM14.477 7.18189C14.477 7.1819 14.477 7.18192 14.477 7.18193C14.5828 7.09724 14.6887 6.99138 14.8052 6.87493C14.9216 6.75849 15.0486 6.63146 15.1968 6.50442C15.4932 6.20801 15.9167 6.08098 16.2978 6.16567C16.7212 6.25036 17.06 6.50443 17.2294 6.84318C17.3088 7.0046 17.3835 7.16371 17.4539 7.32035C17.3835 7.1637 17.3087 7.00458 17.2294 6.84314C17.06 6.50439 16.7212 6.25032 16.2978 6.16563C15.9167 6.08094 15.4932 6.20798 15.1968 6.50439C15.0486 6.63142 14.9216 6.75845 14.8051 6.87489L14.8051 6.8749C14.7557 6.92437 14.7081 6.97191 14.6617 7.01675C14.5988 7.07745 14.5379 7.13318 14.477 7.18189ZM12.6977 6.35925C12.8428 7.15476 12.8833 7.97963 12.8679 8.74864C12.8679 8.79032 12.8704 8.8315 12.8754 8.87195C12.8704 8.83151 12.8679 8.79035 12.8679 8.74867C12.8833 7.97966 12.8428 7.15478 12.6977 6.35925ZM16.7358 10.6654C16.8108 11.1478 16.8483 11.6393 16.8483 12.1362V12.1786C16.8483 13.703 16.2978 15.2274 15.2392 16.3283C14.0535 17.4293 12.5291 18.0221 10.9201 17.9374C9.1416 17.9374 7.44783 17.2175 6.21984 15.9472C5.82743 15.5548 5.50448 15.1119 5.25584 14.6331C5.50447 15.1119 5.82743 15.5548 6.21983 15.9472C7.44782 17.2175 9.14159 17.9373 10.9201 17.9373C12.5291 18.022 14.0535 17.4292 15.2392 16.3283C16.2978 15.2273 16.8483 13.7029 16.8483 12.1785V12.1362C16.8483 11.6393 16.8108 11.1478 16.7358 10.6654ZM10.9306 17.7376C12.4802 17.8192 13.9509 17.2497 15.0989 16.1856C16.1154 15.1261 16.6483 13.655 16.6483 12.1785V12.1362C16.6483 10.8624 16.3969 9.6266 15.8955 8.49474C15.2436 9.11663 14.7845 9.49093 14.4179 9.68717C14.2122 9.79725 14.0268 9.85633 13.846 9.86789C13.6644 9.8795 13.5028 9.84219 13.3473 9.78249C12.9207 9.62211 12.6679 9.20129 12.6679 8.74864V8.74464L12.6679 8.74464C12.6889 7.69735 12.6046 6.55594 12.2954 5.53554C12.01 4.59379 11.5372 3.76766 10.7904 3.20655C9.96581 4.94926 8.72521 6.18561 7.58695 7.28323L7.50836 7.35967C5.97191 8.85397 4.81321 9.98087 4.85306 12.1325L4.85313 12.1362H4.85309C4.85309 13.5239 5.38326 14.8277 6.36125 15.8057L6.36365 15.8081L6.36363 15.8082C7.55387 17.0394 9.19573 17.7374 10.9201 17.7374H10.9306L10.9306 17.7376Z"
                  fill="#ffffff"
                ></path>
              </svg>
            </div>
            <span>热门</span>
          </div>

          <div class="container-item">
            <div class="class-item-green">
              <svg
                width="21"
                height="21"
                viewBox="0 0 21 21"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                class="icon-bg--icon"
              >
                <circle
                  cx="5.6875"
                  cy="14"
                  r="3.5"
                  stroke="#ffffff"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></circle>
                <circle
                  cx="10.5"
                  cy="5.6875"
                  r="3.5"
                  stroke="#ffffff"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></circle>
                <circle
                  cx="15.3125"
                  cy="14"
                  r="3.5"
                  stroke="#ffffff"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></circle>
              </svg>
            </div>
            <span>频道</span>
          </div>
        </div>
        <div class="container-nav-center">
          <div
            class="container-nav-item"
            v-for="(item, index) in navList"
            :key="index"
          >
            <div class="container-item" v-if="index !== navList.length - 1">
              <span>{{ item.name }}</span>
            </div>
            <div class="container-item" v-else>
              <span
                >{{ item.name
                }}<svg
                  t="1668405859230"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2684"
                  width="16"
                  height="16"
                >
                  <path
                    d="M512.726547 675.318646c-8.063653 0-15.790638-3.245927-21.435195-9.006118L231.175103 400.906809c-11.603269-11.837606-11.410887-30.840402 0.427742-42.442648 11.837606-11.601222 30.841426-11.410887 42.442648 0.427742l238.681054 243.534596L751.407602 358.891903c11.601222-11.839653 30.602995-12.033058 42.442648-0.427742 11.839653 11.603269 12.031011 30.605042 0.427742 42.442648L534.161742 666.312528C528.517185 672.072719 520.791224 675.318646 512.726547 675.318646z"
                    p-id="2685"
                  ></path>
                </svg>
              </span>
            </div>
            <div
              class="container-item-more-wrap"
              v-if="index === navList.length - 1"
            >
              <div class="container-item-more">
                <span>动物圈</span>
                <span>虚拟up主</span>
                <span>VLOG</span>
                <span>搞笑</span>
                <span>单机游戏</span>
                <span>公益</span>
                <span>公开课</span>
              </div>
            </div>
          </div>
        </div>
        <div class="container-nav-right">
          <div class="right-top">
            <div>
              <svg
                t="1642646834655"
                class="icon side-icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4061"
                width="200"
                height="200"
              >
                <path
                  d="M810.6496 153.6C843.6736 153.6 870.4 180.3264 870.4 213.3504v597.2992c0 33.024-26.7264 59.7504-59.7504 59.7504H213.3504A59.7504 59.7504 0 0 1 153.6 810.6496V213.3504C153.6 180.3264 180.3264 153.6 213.3504 153.6z m-332.8 460.8H341.3504a34.1504 34.1504 0 0 0 0 68.2496h136.4992a34.1504 34.1504 0 1 0 0-68.2496z m204.8-136.6016H341.3504a34.1504 34.1504 0 0 0 0 68.2496h341.2992a34.1504 34.1504 0 0 0 0-68.2496z m0-136.3968H341.3504a34.1504 34.1504 0 0 0 0 68.2496h341.2992a34.1504 34.1504 0 1 0 0-68.2496z"
                  p-id="4062"
                ></path>
              </svg>
              <span>专 栏</span>
            </div>
            <div>
              <svg
                t="1642646844599"
                class="icon side-icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4188"
                width="200"
                height="200"
              >
                <path
                  d="M772.4544 229.2736l2.048 6.4512 87.2448 283.136c8.8576 33.1264-10.24 66.56-41.984 78.4384l-6.5536 2.048-118.1696 31.744a32.768 32.768 0 0 1-8.192 1.0752l-4.096-0.2048-124.672-14.6432-193.3824 51.8144 36.6592 136.704a49.152 49.152 0 0 1-93.184 30.8736l-1.792-5.4272L155.2896 267.264a49.152 49.152 0 0 1 93.184-30.8736l1.792 5.4272 4.096 15.36 188.928-50.6368a32.768 32.768 0 0 1 8.1408-1.0752l4.096 0.2048 124.5184 14.592 112.1792-30.0544c33.4336-8.96 68.1984 7.7824 80.2304 39.0144z"
                  p-id="4189"
                ></path>
              </svg>
              <span>活 动</span>
            </div>
            <div>
              <svg
                t="1642670011510"
                class="icon side-icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3116"
                width="200"
                height="200"
              >
                <path
                  d="M836.3008 170.6496c17.1008 0 31.2832 12.6464 33.7408 29.0816L870.4 204.8v316.16a34.1504 34.1504 0 0 1-29.0816 33.792l-5.0176 0.3584h-102.4v195.7888a34.1504 34.1504 0 0 1-29.1328 33.792l-5.0176 0.3584H386.7648l-127.3344 95.5392a34.2016 34.2016 0 0 1-53.248-17.3568l-1.024-4.8128-0.3584-5.12-0.0512-68.3008H153.6a34.1504 34.1504 0 0 1-32.6656-24.2176l-1.0752-4.8128-0.4096-5.0688v-409.6c0-17.152 12.6464-31.3344 29.0816-33.792L153.6 307.2h174.2336V204.8c0-17.152 12.6464-31.3344 29.1328-33.792l5.0176-0.3584h474.3168z m-477.9008 409.6H256l-5.0688 0.4096a34.1504 34.1504 0 0 0 0 67.4816l5.0688 0.4096h102.4l5.0688-0.4096A34.1504 34.1504 0 0 0 358.4 580.2496z m102.4-136.4992H256l-5.0688 0.4096a34.1504 34.1504 0 0 0 0 67.4816l5.0688 0.4096h204.8l5.0688-0.4096A34.1504 34.1504 0 0 0 460.8 443.7504z m341.2992-204.8512h-406.016v68.2496h303.616c17.152 0 31.3856 12.6464 33.792 29.1328l0.3584 5.0176v145.4592l68.2496 0.0512V238.8992z"
                  p-id="3117"
                ></path>
              </svg>
              <span>社区中心</span>
            </div>
          </div>
          <div class="right-button">
            <div>
              <svg
                t="1642646710703"
                class="icon side-icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3158"
                width="200"
                height="200"
              >
                <path
                  d="M682.6496 204.8512c35.4816 0 64.6656 27.136 67.9424 61.696l0.3072 6.6048V358.4l81.92-61.44a34.2016 34.2016 0 0 1 53.248 17.408l1.024 4.7616 0.3584 5.12v392.5504a34.1504 34.1504 0 0 1-50.2784 30.1056l-4.352-2.7648-81.92-61.4912v68.3008c0 33.1264-23.552 60.7232-54.8352 66.9696l-6.8608 1.024-6.5536 0.256H204.8a68.2496 68.2496 0 0 1-67.9936-61.696l-0.3072-6.5536V273.152c0-35.4816 27.136-64.6656 61.696-67.9936L204.8 204.8512h477.8496zM385.3824 389.12a34.1504 34.1504 0 0 0-34.0992 34.1504v179.6096a34.1504 34.1504 0 0 0 53.0432 28.416l134.7584-89.8048a34.1504 34.1504 0 0 0 0-56.832L404.3264 394.8544a34.1504 34.1504 0 0 0-18.944-5.7344z"
                  p-id="3159"
                ></path>
              </svg>
              <span>直 播</span>
            </div>
            <div>
              <svg
                t="1642669966795"
                class="icon side-icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2862"
                width="200"
                height="200"
              >
                <path
                  d="M749.2096 168.96a102.4 102.4 0 0 1 102.2464 96.3584l0.1536 6.0416v477.8496a102.4 102.4 0 0 1-96.3584 102.2464l-6.0416 0.1536H271.36a102.4 102.4 0 0 1-102.2464-96.3584l-0.1536-6.0416V271.36a102.4 102.4 0 0 1 96.3584-102.2464L271.36 168.96h477.8496z m-69.9392 385.4848a34.1504 34.1504 0 0 0-48.2816 0 170.6496 170.6496 0 0 1-241.3568 0 34.1504 34.1504 0 1 0-48.2816 48.2304 238.9504 238.9504 0 0 0 337.92 0 34.1504 34.1504 0 0 0 0-48.2304zM322.56 339.6608a51.2 51.2 0 0 0-51.2 51.2v34.1504a51.2 51.2 0 1 0 102.4 0v-34.1504a51.2 51.2 0 0 0-51.2-51.2z m375.4496 0a51.2 51.2 0 0 0-51.2 51.2v34.1504a51.2 51.2 0 1 0 102.4 0v-34.1504a51.2 51.2 0 0 0-51.2-51.2z"
                  p-id="2863"
                ></path>
              </svg>
              <span>课 堂</span>
            </div>
            <div>
              <svg
                t="1642669999866"
                class="icon side-icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2989"
                width="200"
                height="200"
              >
                <path
                  d="M783.36 221.8496a102.4 102.4 0 0 1 102.0928 94.7712l0.3072 7.68v409.6a102.4 102.4 0 0 1-94.72 102.0928l-7.68 0.256H237.2096a102.4 102.4 0 0 1-102.0928-94.72l-0.3072-7.68v-409.6A102.4 102.4 0 0 1 229.5808 222.208l7.68-0.3072H783.36z m-155.5968 81.408a34.1504 34.1504 0 0 0-50.7904 23.6032l-54.1696 203.3152a128 128 0 1 0-108.288 220.8256l6.7584 1.024a128 128 0 0 0 141.5168-104.8576l71.7824-253.7984 47.4624 35.4816 3.2768 2.2016a34.1504 34.1504 0 0 0 37.5808-56.832l-91.8528-68.7616z"
                  p-id="2990"
                ></path>
              </svg>
              <span>新歌热榜</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 顶部内容 -->
      <div class="container-body">
        <div class="container-body-swiper">
          <div class="swiper-container-wrap">
            <div class="swiper-container" :ref="someRef">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide swiper-no-swiping"
                  v-for="(item, index) in someList"
                  :key="index"
                >
                  <router-link to="/videodetail" target="_blank">
                    <img :src="item.url" :bgc="item.color" />
                  </router-link>
                </div>
              </div>
            </div>
            <div
              class="swiper-slide-blank"
              :style="`backgroundColor: ${bannerColor};box-shadow: -5px 0px 5px -29px ${bannerColor}, 0px -32px 24px 17px ${bannerColor}, 0px 5px 5px -7px ${bannerColor},5px 0px 5px -8px ${bannerColor} `"
            >
              <ul class="blank-ul">
                <li
                  v-for="(item, index) in someList"
                  :key="index"
                  class="blank-li"
                >
                  <div :class="{ before: item.isBlankActive }"></div>
                  <div :class="{ after: item.isBlankActive }"></div>
                </li>
              </ul>
              <div class="blank-text">
                <span>{{ blankText }}</span>
              </div>
              <div class="blank-switch">
                <button @click="blankPrev">
                  <svg
                    t="1668348929891"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1757"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M268.896 476.032 622.24 125.92c18.848-18.656 49.216-18.528 67.872 0.32 18.656 18.816 18.528 49.216-0.32 67.872l-319.456 316.576 318.176 321.056c18.656 18.816 18.528 49.216-0.32 67.872-9.344 9.28-21.568 13.92-33.792 13.92-12.352 0-24.704-4.736-34.08-14.208L270.208 545.984c-0.512-0.512-0.672-1.248-1.184-1.792-0.128-0.128-0.288-0.16-0.416-0.288C249.952 525.088 250.08 494.688 268.896 476.032z"
                      p-id="1758"
                      fill="#ffffff"
                    ></path>
                  </svg>
                </button>
                <button @click="blankNext">
                  <svg
                    t="1668348771511"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1369"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M769.792 476.032 416.48 125.92c-18.848-18.656-49.216-18.528-67.872 0.32-18.656 18.816-18.528 49.216 0.32 67.872l319.456 316.576-318.176 321.056c-18.656 18.816-18.528 49.216 0.32 67.872 9.344 9.28 21.568 13.92 33.792 13.92 12.352 0 24.704-4.736 34.08-14.208l350.112-353.312c0.512-0.512 0.672-1.248 1.184-1.792 0.128-0.128 0.288-0.16 0.416-0.288C788.736 525.088 788.64 494.688 769.792 476.032z"
                      p-id="1370"
                      fill="#ffffff"
                    ></path>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="container-body-right">
          <div v-for="index in 6" :key="index" class="video-card__wrap">
            <div class="video-img">
              <router-link to="/videodetail" target="_blank">
                <img src="./images/222.avif" alt="" />
              </router-link>
              <div class="video-img-info">
                <div class="video-img-play">
                  <svg
                    t="1668353650028"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="27189"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M864 896H160c-52.8 0-96-43.2-96-96V224c0-52.8 43.2-96 96-96h704c52.8 0 96 43.2 96 96v576c0 52.8-43.2 96-96 96zM160 192c-17.6 0-32 14.4-32 32v576c0 17.6 14.4 32 32 32h704c17.6 0 32-14.4 32-32V224c0-17.6-14.4-32-32-32H160z m273.6 480c-4.8 0-11.2-1.6-16-4.8-9.6-6.4-16-16-16-27.2V384c0-11.2 6.4-22.4 16-27.2 9.6-6.4 22.4-6.4 32 0l222.4 128c9.6 6.4 16 16 16 27.2s-6.4 22.4-16 27.2l-222.4 128c-4.8 3.2-11.2 4.8-16 4.8z m32-232v145.6l126.4-72L465.6 440z"
                      p-id="27190"
                      fill="#ffffff"
                    ></path>
                  </svg>
                  <span>791万</span>
                </div>
                <div class="video-img-content">
                  <svg
                    t="1668353478528"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="16988"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M896.17 334.19c-17.67 0-32 14.33-32 32v401.66H162.31V256.1h516.23c17.67 0 32-14.33 32-32s-14.33-32-32-32H130.31c-17.67 0-32 14.33-32 32v575.75c0 17.67 14.33 32 32 32h765.87c17.67 0 32-14.33 32-32V366.19c-0.01-17.67-14.33-32-32.01-32z"
                      p-id="16989"
                      fill="#ffffff"
                    ></path>
                    <path
                      d="M640.2 383.79c0-17.67-14.33-32-32-32H288.1c-17.67 0-32 14.33-32 32s14.33 32 32 32h320.1c17.67 0 32-14.33 32-32zM288.34 512.09c-17.67 0-32 14.33-32 32s14.33 32 32 32h191.57c17.67 0 32-14.33 32-32s-14.33-32-32-32H288.34zM539.38 698.56a31.79 31.79 0 0 0 17.67 5.34c10.36 0 20.53-5.03 26.69-14.3l297.05-447.38c9.78-14.72 5.76-34.58-8.96-44.36-14.72-9.78-34.58-5.77-44.36 8.96L530.42 654.2c-9.77 14.72-5.76 34.58 8.96 44.36z"
                      p-id="16990"
                      fill="#ffffff"
                    ></path>
                  </svg>
                  <span>4.1万</span>
                </div>
              </div>
              <div class="video-img-time">
                <span>03:55</span>
              </div>
            </div>
            <div class="video-text">
              <p>如何优雅地把 4090 装进 ITX？ 这是我的答案</p>
            </div>
            <div class="video-author">
              <svg
                t="1668221134257"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="15862"
                width="14"
                height="14"
              >
                <path
                  d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"
                  p-id="15863"
                ></path>
                <path
                  d="M419.2 544c0 51.2-3.2 108.8-83.2 108.8S252.8 595.2 252.8 544v-217.6H192v243.2c0 96 51.2 140.8 140.8 140.8 89.6 0 147.2-48 147.2-144v-240h-60.8V544zM710.4 326.4h-156.8V704h60.8v-147.2h96c102.4 0 121.6-67.2 121.6-115.2 0-44.8-19.2-115.2-121.6-115.2z m-3.2 179.2h-92.8V384h92.8c32 0 60.8 12.8 60.8 60.8 0 44.8-32 60.8-60.8 60.8z"
                  p-id="15864"
                ></path>
              </svg>
              <span>立宗鸽鸽</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 赛事 -->
    <div class="race-wrap">
      <div class="race-title">
        <div class="area-header">
          <svg
            t="1668334684575"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3060"
            width="32"
            height="32"
          >
            <path
              d="M621.0048 807.9872h-71.3728v-110.7968H463.4624v110.7968H392.0896c-28.5696 0-51.712 23.1424-51.712 51.712s23.1424 51.712 51.712 51.712h228.9664c28.5696 0 51.712-23.1424 51.712-51.712s-23.1936-51.712-51.7632-51.712z"
              fill="#FF6C73"
              p-id="3061"
            ></path>
            <path
              d="M506.5216 738.4064v64.8192c0 13.4656 10.9056 24.3712 24.3712 24.3712h83.8656s17.5616 4.4032 17.5616 27.2384c0 19.6608-22.9376 20.8384-57.7536 20.8384H404.48c-22.528 0-44.9024-4.0448-64.1024-15.9744 11.1616 32.1024 23.04 48.4864 147.5072 48.4864s187.392-0.256 184.832-48.4864-126.5152-59.2384-126.5152-59.2384l-4.4544-72.2432-35.2256 10.1888z"
              fill="#FF4E51"
              p-id="3062"
            ></path>
            <path
              d="M621.0048 931.84H392.0896c-39.7824 0-72.192-32.3584-72.192-72.192 0-39.7824 32.3584-72.192 72.192-72.192h50.8928v-90.3168c0-11.3152 9.1648-20.48 20.48-20.48h86.1696c11.3152 0 20.48 9.1648 20.48 20.48v90.3168h50.8928c39.7824 0 72.192 32.3584 72.192 72.192 0 39.8336-32.3584 72.192-72.192 72.192z m-228.9152-103.3728c-17.2032 0-31.232 14.0288-31.232 31.232 0 17.2032 14.0288 31.232 31.232 31.232h228.9664c17.2032 0 31.232-14.0288 31.232-31.232 0-17.2032-14.0288-31.232-31.232-31.232h-71.3728c-11.3152 0-20.48-9.1648-20.48-20.48v-90.3168h-45.2096v90.3168c0 11.3152-9.1648 20.48-20.48 20.48H392.0896z"
              fill="#211D38"
              p-id="3063"
            ></path>
            <path
              d="M237.9776 502.528h34.048V234.1888H171.3152c-36.8128 0-66.6624 29.8496-66.6624 66.6624v68.352c0 73.6256 59.6992 133.3248 133.3248 133.3248zM785.2032 502.528h-34.048V234.1888h100.7104c36.8128 0 66.6624 29.8496 66.6624 66.6624v68.352c0 73.6256-59.6992 133.3248-133.3248 133.3248z"
              fill="#FF6C73"
              p-id="3064"
            ></path>
            <path
              d="M167.1168 242.176v193.4336s-29.3888-7.1168-52.2752-44.3904c15.5136 52.6336 41.4208 97.3824 99.1232 101.3248-5.0176-95.4368-5.0176-250.3168-5.0176-250.3168h-41.8304zM871.168 242.8416v125.5424c0 35.2256-20.4288 84.2752-53.8624 96.0512-5.2224 26.9824-7.168 35.7888-7.168 35.7888S911.36 459.008 911.36 371.5072V266.24l-40.192-23.3984z"
              fill="#FF4E51"
              p-id="3065"
            ></path>
            <path
              d="M272.0768 523.008h-34.048c-84.8384 0-153.8048-69.0176-153.8048-153.8048V300.8512c0-48.0768 39.1168-87.1424 87.1424-87.1424h100.7104c11.3152 0 20.48 9.1648 20.48 20.48v268.3392c0 11.3152-9.216 20.48-20.48 20.48zM171.3152 254.6688c-25.4464 0-46.1824 20.736-46.1824 46.1824v68.352c0 62.208 50.6368 112.8448 112.8448 112.8448h13.568V254.6688H171.3152zM785.2032 523.008h-34.048c-11.3152 0-20.48-9.1648-20.48-20.48V234.1888c0-11.3152 9.1648-20.48 20.48-20.48h100.7104c48.0768 0 87.1424 39.1168 87.1424 87.1424v68.352c0 84.7872-68.9664 153.8048-153.8048 153.8048z m-13.568-40.96h13.568c62.208 0 112.8448-50.6368 112.8448-112.8448V300.8512c0-25.4464-20.736-46.1824-46.1824-46.1824h-80.2304v227.3792z"
              fill="#211D38"
              p-id="3066"
            ></path>
            <path
              d="M506.5216 729.0368c-163.1744 0-295.424-132.2496-295.424-295.424V166.0416c0-24.8832 20.1728-45.1072 45.1072-45.1072h500.6336c24.8832 0 45.1072 20.1728 45.1072 45.1072v267.5712c0 163.1232-132.2496 295.424-295.424 295.424z"
              fill="#FAC573"
              p-id="3067"
            ></path>
            <path
              d="M737.8432 138.7008v307.2c0 58.8288-43.5712 215.1424-215.9104 226.56-172.3392 11.3664-221.184-53.6576-246.8352-83.968 38.4 64.768 103.7824 144.0768 246.8352 144.0768s295.424-130.4064 295.424-293.1712V143.3088l-79.5136-4.608z"
              fill="#EF981A"
              p-id="3068"
            ></path>
            <path
              d="M506.5216 749.5168c-174.1824 0-315.904-141.7216-315.904-315.904V166.0416c0-36.1472 29.44-65.5872 65.5872-65.5872h500.6336c36.1472 0 65.5872 29.44 65.5872 65.5872v267.52c0 174.2336-141.7216 315.9552-315.904 315.9552zM256.2048 141.4144c-13.568 0-24.6272 11.0592-24.6272 24.6272v267.52c0 151.6032 123.3408 274.944 274.944 274.944s274.944-123.3408 274.944-274.944V166.0416c0-13.568-11.0592-24.6272-24.6272-24.6272H256.2048z"
              fill="#211D38"
              p-id="3069"
            ></path>
            <path
              d="M533.8624 268.032l20.1216 40.704a30.38208 30.38208 0 0 0 22.9376 16.64l44.9536 6.5536c24.9856 3.6352 34.9696 34.3552 16.896 51.968l-32.512 31.6928a30.55616 30.55616 0 0 0-8.7552 26.9824l7.68 44.7488c4.2496 24.8832-21.8624 43.8784-44.1856 32.1024l-40.192-21.1456c-8.8576-4.6592-19.456-4.6592-28.3648 0l-40.192 21.1456c-22.3744 11.7248-48.4864-7.2192-44.1856-32.1024l7.68-44.7488c1.6896-9.8816-1.5872-19.968-8.7552-26.9824l-32.512-31.6928c-18.0736-17.6128-8.0896-48.3328 16.896-51.968l44.9536-6.5536c9.9328-1.4336 18.4832-7.68 22.9376-16.64l20.1216-40.704c11.008-22.6816 43.3152-22.6816 54.4768 0z"
              fill="#FF6C73"
              p-id="3070"
            ></path>
            <path
              d="M492.6976 268.9536l32.2048 65.9456a44.55424 44.55424 0 0 0 33.3312 24.5248l42.9056 6.6048-47.4112 54.272 12.0832 57.4976-42.0864-17.2032a32.27136 32.27136 0 0 0-25.9584 0.6656l-56.1152 26.3168-15.36-27.136-14.3872 44.1344 27.8016 12.7488 74.8544-26.7776 74.1888 32.4608 14.0288-89.344 45.1072-80.0768-93.9008-44.8512-47.36-57.7024-13.9264 17.92z"
              fill="#FF4E51"
              p-id="3071"
            ></path>
            <path
              d="M575.1296 543.488c-8.0896 0-16.2304-1.9456-23.7568-5.888l-40.192-21.1456c-2.9184-1.536-6.4-1.536-9.2672 0L461.7216 537.6c-17.3056 9.1136-37.8368 7.6288-53.6576-3.8912s-23.552-30.5664-20.2752-49.8176l7.68-44.7488c0.5632-3.2256-0.512-6.5536-2.8672-8.8576l-32.512-31.6928a50.6368 50.6368 0 0 1-12.9024-52.224 50.64704 50.64704 0 0 1 41.1136-34.6624l44.9536-6.5536a10.0352 10.0352 0 0 0 7.5264-5.4784l20.1216-40.7552c8.6528-17.5104 26.1632-28.416 45.6704-28.416s37.0176 10.9056 45.6704 28.416l20.1216 40.704c1.4336 2.9696 4.2496 4.9664 7.5264 5.4784l44.9536 6.5536c19.3536 2.816 35.072 16.0768 41.1136 34.6624a50.6368 50.6368 0 0 1-12.9024 52.224l-32.512 31.6928c-2.3552 2.304-3.4304 5.5808-2.8672 8.8576l7.68 44.7488c3.2768 19.2512-4.4544 38.3488-20.2752 49.8176a50.5344 50.5344 0 0 1-29.952 9.8304z m-68.608-69.1712c8.1408 0 16.2816 1.9456 23.7056 5.8368l40.192 21.1456c4.9664 2.6112 9.0112 0.3584 10.496-0.768 1.4848-1.0752 4.9152-4.2496 3.9936-9.7792l-7.68-44.7488a51.0976 51.0976 0 0 1 14.6432-45.1072l32.512-31.6928c3.9936-3.8912 3.1232-8.448 2.5088-10.24-0.5632-1.792-2.5088-5.9904-8.0384-6.8096l-44.9536-6.5536a50.87232 50.87232 0 0 1-38.3488-27.8528l-20.1216-40.704c-2.4576-5.0176-7.0656-5.5808-8.96-5.5808s-6.4512 0.5632-8.96 5.5808l-20.1216 40.704a50.87232 50.87232 0 0 1-38.3488 27.8528l-44.9536 6.5024c-5.5296 0.8192-7.4752 5.0176-8.0384 6.8096-0.5632 1.792-1.4848 6.3488 2.5088 10.24l32.512 31.6928a50.816 50.816 0 0 1 14.6432 45.1072l-7.68 44.7488c-0.9216 5.5296 2.4576 8.6528 3.9936 9.7792 1.4848 1.0752 5.5808 3.3792 10.496 0.768l40.192-21.1456c7.5264-3.84 15.6672-5.7856 23.808-5.7856z"
              fill="#211D38"
              p-id="3072"
            ></path>
            <path
              d="M387.6352 167.2704h-30.1056a12.8 12.8 0 0 1 0-25.6h30.1056a12.8 12.8 0 0 1 0 25.6zM244.6336 452.352a12.8 12.8 0 0 1-12.8-12.8V177.1008c0-19.5584 15.9232-35.4304 35.4304-35.4304h42.2912a12.8 12.8 0 0 1 0 25.6H267.264c-5.4272 0-9.8304 4.4032-9.8304 9.8304v262.4512c0 7.1168-5.7344 12.8-12.8 12.8zM136.8064 381.184a12.8 12.8 0 0 1-12.8-12.8V303.616a12.8 12.8 0 0 1 25.6 0v64.768a12.8 12.8 0 0 1-12.8 12.8zM835.7376 381.184a12.8 12.8 0 0 1-12.8-12.8V303.616a12.8 12.8 0 0 1 25.6 0v64.768a12.8 12.8 0 0 1-12.8 12.8zM439.8592 370.688c-6.1952 0-11.6224-4.5056-12.6464-10.8032-1.1264-6.9632 3.6352-13.5168 10.6496-14.6432l2.2016-0.3584a49.64352 49.64352 0 0 0 35.0208-23.9104c3.584-6.0928 11.4176-8.0896 17.5104-4.5568 6.0928 3.584 8.1408 11.4176 4.5568 17.5104a75.24352 75.24352 0 0 1-53.0432 36.1984l-2.2016 0.3584c-0.7168 0.1536-1.3824 0.2048-2.048 0.2048z"
              fill="#FFFFFF"
              p-id="3073"
            ></path>
            <path
              d="M911.36 146.688m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"
              fill="#F9C47B"
              p-id="3074"
            ></path>
            <path
              d="M157.9008 822.8864m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"
              fill="#F9C47B"
              p-id="3075"
            ></path>
            <path
              d="M267.6736 755.4048a16.9472 16.9472 0 0 1-6.4-2.4576C197.376 711.68 173.312 665.0368 172.3392 663.04a16.7168 16.7168 0 0 1 7.424-22.4768c8.2432-4.1472 18.2784-0.8704 22.4768 7.3728 0.3584 0.7168 21.7088 41.0624 77.2608 76.9024a16.7424 16.7424 0 1 1-11.8272 30.5664z"
              fill="#E2E5F1"
              p-id="3076"
            ></path>
            <path
              d="M810.1376 846.7968c-25.5488 0-46.336-20.7872-46.336-46.336s20.7872-46.336 46.336-46.336c25.5488 0 46.336 20.7872 46.336 46.336s-20.7872 46.336-46.336 46.336z m0-64.9216c-10.24 0-18.5344 8.3456-18.5344 18.5344s8.3456 18.5344 18.5344 18.5344 18.5344-8.3456 18.5344-18.5344-8.2944-18.5344-18.5344-18.5344z"
              fill="#97B5FF"
              p-id="3077"
            ></path>
          </svg>
          <span class="race-font">赛事</span>
        </div>
      </div>
      <div class="race-body">
        <div v-for="index in 5" :key="index" class="video-card__wrap">
          <div class="video-img">
            <router-link to="/videodetail" target="_blank">
              <img src="./images/111.avif" alt="" />
            </router-link>
            <div class="video-img-info">
              <div class="video-img-play">
                <svg
                  t="1668353650028"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="27189"
                  width="16"
                  height="16"
                >
                  <path
                    d="M864 896H160c-52.8 0-96-43.2-96-96V224c0-52.8 43.2-96 96-96h704c52.8 0 96 43.2 96 96v576c0 52.8-43.2 96-96 96zM160 192c-17.6 0-32 14.4-32 32v576c0 17.6 14.4 32 32 32h704c17.6 0 32-14.4 32-32V224c0-17.6-14.4-32-32-32H160z m273.6 480c-4.8 0-11.2-1.6-16-4.8-9.6-6.4-16-16-16-27.2V384c0-11.2 6.4-22.4 16-27.2 9.6-6.4 22.4-6.4 32 0l222.4 128c9.6 6.4 16 16 16 27.2s-6.4 22.4-16 27.2l-222.4 128c-4.8 3.2-11.2 4.8-16 4.8z m32-232v145.6l126.4-72L465.6 440z"
                    p-id="27190"
                    fill="#ffffff"
                  ></path>
                </svg>
                <span>791万</span>
              </div>
              <div class="video-img-content">
                <svg
                  t="1668353478528"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="16988"
                  width="16"
                  height="16"
                >
                  <path
                    d="M896.17 334.19c-17.67 0-32 14.33-32 32v401.66H162.31V256.1h516.23c17.67 0 32-14.33 32-32s-14.33-32-32-32H130.31c-17.67 0-32 14.33-32 32v575.75c0 17.67 14.33 32 32 32h765.87c17.67 0 32-14.33 32-32V366.19c-0.01-17.67-14.33-32-32.01-32z"
                    p-id="16989"
                    fill="#ffffff"
                  ></path>
                  <path
                    d="M640.2 383.79c0-17.67-14.33-32-32-32H288.1c-17.67 0-32 14.33-32 32s14.33 32 32 32h320.1c17.67 0 32-14.33 32-32zM288.34 512.09c-17.67 0-32 14.33-32 32s14.33 32 32 32h191.57c17.67 0 32-14.33 32-32s-14.33-32-32-32H288.34zM539.38 698.56a31.79 31.79 0 0 0 17.67 5.34c10.36 0 20.53-5.03 26.69-14.3l297.05-447.38c9.78-14.72 5.76-34.58-8.96-44.36-14.72-9.78-34.58-5.77-44.36 8.96L530.42 654.2c-9.77 14.72-5.76 34.58 8.96 44.36z"
                    p-id="16990"
                    fill="#ffffff"
                  ></path>
                </svg>
                <span>4.1万</span>
              </div>
            </div>
            <div class="video-img-time">
              <span>03:55</span>
            </div>
          </div>
          <div class="video-text">
            <p>如何优雅地把 4090 装进 ITX？ 这是我的答案</p>
          </div>
          <div class="video-author">
            <svg
              t="1668221134257"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="15862"
              width="14"
              height="14"
            >
              <path
                d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"
                p-id="15863"
              ></path>
              <path
                d="M419.2 544c0 51.2-3.2 108.8-83.2 108.8S252.8 595.2 252.8 544v-217.6H192v243.2c0 96 51.2 140.8 140.8 140.8 89.6 0 147.2-48 147.2-144v-240h-60.8V544zM710.4 326.4h-156.8V704h60.8v-147.2h96c102.4 0 121.6-67.2 121.6-115.2 0-44.8-19.2-115.2-121.6-115.2z m-3.2 179.2h-92.8V384h92.8c32 0 60.8 12.8 60.8 60.8 0 44.8-32 60.8-60.8 60.8z"
                p-id="15864"
              ></path>
            </svg>
            <span>立宗鸽鸽</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 番剧 -->
    <div class="race-wrap">
      <div class="race-title">
        <div class="area-header">
          <svg
            t="1668337813200"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="20524"
            width="32"
            height="32"
          >
            <path
              d="M762.8 71.1c-16-11.6-38.6-8.1-50.3 7.9L504.2 365.5 295.8 79c-11.6-16-34.3-19.6-50.3-7.9-16 11.6-19.6 34.3-7.9 50.3L461 428.5c-4.2 14.2 0.6 30.1 13.2 39.3 9 6.5 19.9 8.1 30 5.6 10 2.5 21 0.9 30-5.6 12.6-9.2 17.4-25.1 13.2-39.3l223.4-307.2c11.6-16 8-38.6-8-50.2z"
              fill="#FB813A"
              p-id="20525"
            ></path>
            <path
              d="M861.7 182.1H162.3c-33.8 0-61.1 27.4-61.1 61.1v655.4c0 33.8 27.4 61.1 61.1 61.1h699.5c33.8 0 61.1-27.4 61.1-61.1V243.2c0-33.8-27.4-61.1-61.2-61.1z"
              fill="#FDDE80"
              p-id="20526"
            ></path>
            <path
              d="M781.1 863.2H242.9c-21.5 0-39-17.5-39-39v-399c0-21.5 17.5-39 39-39h538.3c21.5 0 39 17.5 39 39v398.9c0 21.6-17.5 39.1-39.1 39.1z"
              fill="#FFFFFF"
              p-id="20527"
            ></path>
            <path
              d="M398.9 480.3H297c-5.2 0-9.4 4.2-9.4 9.4v101.9c0 5.2 4.2 9.4 9.4 9.4h102c5.2 0 9.4-4.2 9.4-9.4V489.7c-0.1-5.2-4.3-9.4-9.5-9.4zM563 480.3H461c-5.2 0-9.4 4.2-9.4 9.4v101.9c0 5.2 4.2 9.4 9.4 9.4h102c5.2 0 9.4-4.2 9.4-9.4V489.7c0-5.2-4.2-9.4-9.4-9.4zM727.1 480.3h-102c-5.2 0-9.3 4.2-9.3 9.3v102c0 5.2 4.2 9.4 9.4 9.4h102c5.2 0 9.3-4.2 9.3-9.3v-102c-0.1-5.2-4.3-9.4-9.4-9.4zM398.9 665.8h-102c-5.2 0-9.3 4.2-9.3 9.3v102c0 5.2 4.2 9.4 9.4 9.4h102c5.2 0 9.3-4.2 9.3-9.3v-102c0-5.2-4.2-9.4-9.4-9.4zM563 665.8H461c-5.2 0-9.4 4.2-9.4 9.4v101.9c0 5.2 4.2 9.4 9.4 9.4h102c5.2 0 9.4-4.2 9.4-9.4V675.2c0-5.2-4.2-9.4-9.4-9.4z"
              fill="#FB813A"
              p-id="20528"
            ></path>
            <path
              d="M625.1 786.5h102c5.2 0 9.4-4.2 9.4-9.4V675.2c0-5.2-4.2-9.4-9.4-9.4h-102c-5.2 0-9.4 4.2-9.4 9.4v101.9c0 5.2 4.2 9.4 9.4 9.4z"
              fill="#9289F0"
              p-id="20529"
            ></path>
          </svg>
          <span class="race-font">番剧</span>
        </div>
        <div ref="track" class="track-switch-wrap">
          <button
            v-for="(item, index) in dateList"
            :class="{ 'is-active': item.isActive }"
            :key="index"
            @click="switchBtn(index)"
          >
            {{ item.name }}
          </button>
        </div>
        <div class="timeline-btn">
          <a
            class="primary-btn"
            href="https://www.bilibili.com/anime/timeline/"
            target="_blank"
          >
            <span>新番时间表</span>
            <svg
              t="1668339050249"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="21966"
              width="12"
              height="12"
            >
              <path
                d="M769.792 476.032 416.48 125.92c-18.848-18.656-49.216-18.528-67.872 0.32-18.656 18.816-18.528 49.216 0.32 67.872l319.456 316.576-318.176 321.056c-18.656 18.816-18.528 49.216 0.32 67.872 9.344 9.28 21.568 13.92 33.792 13.92 12.352 0 24.704-4.736 34.08-14.208l350.112-353.312c0.512-0.512 0.672-1.248 1.184-1.792 0.128-0.128 0.288-0.16 0.416-0.288C788.736 525.088 788.64 494.688 769.792 476.032z"
                p-id="21967"
              ></path>
            </svg>
          </a>
          <a
            class="see-more"
            href="https://www.bilibili.com/anime/timeline/"
            target="_blank"
          >
            <span>查看更多</span>
            <svg
              t="1668339050249"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="21966"
              width="12"
              height="12"
            >
              <path
                d="M769.792 476.032 416.48 125.92c-18.848-18.656-49.216-18.528-67.872 0.32-18.656 18.816-18.528 49.216 0.32 67.872l319.456 316.576-318.176 321.056c-18.656 18.816-18.528 49.216 0.32 67.872 9.344 9.28 21.568 13.92 33.792 13.92 12.352 0 24.704-4.736 34.08-14.208l350.112-353.312c0.512-0.512 0.672-1.248 1.184-1.792 0.128-0.128 0.288-0.16 0.416-0.288C788.736 525.088 788.64 494.688 769.792 476.032z"
                p-id="21967"
              ></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="race-body">
        <div v-for="index in 5" :key="index" class="video-card__wrap">
          <div class="video-img">
            <router-link to="/videodetail" target="_blank">
              <img src="./images/333.avif" alt="" />
            </router-link>
            <div class="video-img-info">
              <div class="video-img-play">
                <svg
                  t="1668353650028"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="27189"
                  width="16"
                  height="16"
                >
                  <path
                    d="M864 896H160c-52.8 0-96-43.2-96-96V224c0-52.8 43.2-96 96-96h704c52.8 0 96 43.2 96 96v576c0 52.8-43.2 96-96 96zM160 192c-17.6 0-32 14.4-32 32v576c0 17.6 14.4 32 32 32h704c17.6 0 32-14.4 32-32V224c0-17.6-14.4-32-32-32H160z m273.6 480c-4.8 0-11.2-1.6-16-4.8-9.6-6.4-16-16-16-27.2V384c0-11.2 6.4-22.4 16-27.2 9.6-6.4 22.4-6.4 32 0l222.4 128c9.6 6.4 16 16 16 27.2s-6.4 22.4-16 27.2l-222.4 128c-4.8 3.2-11.2 4.8-16 4.8z m32-232v145.6l126.4-72L465.6 440z"
                    p-id="27190"
                    fill="#ffffff"
                  ></path>
                </svg>
                <span>791万</span>
              </div>
              <div class="video-img-content">
                <svg
                  t="1668353478528"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="16988"
                  width="16"
                  height="16"
                >
                  <path
                    d="M896.17 334.19c-17.67 0-32 14.33-32 32v401.66H162.31V256.1h516.23c17.67 0 32-14.33 32-32s-14.33-32-32-32H130.31c-17.67 0-32 14.33-32 32v575.75c0 17.67 14.33 32 32 32h765.87c17.67 0 32-14.33 32-32V366.19c-0.01-17.67-14.33-32-32.01-32z"
                    p-id="16989"
                    fill="#ffffff"
                  ></path>
                  <path
                    d="M640.2 383.79c0-17.67-14.33-32-32-32H288.1c-17.67 0-32 14.33-32 32s14.33 32 32 32h320.1c17.67 0 32-14.33 32-32zM288.34 512.09c-17.67 0-32 14.33-32 32s14.33 32 32 32h191.57c17.67 0 32-14.33 32-32s-14.33-32-32-32H288.34zM539.38 698.56a31.79 31.79 0 0 0 17.67 5.34c10.36 0 20.53-5.03 26.69-14.3l297.05-447.38c9.78-14.72 5.76-34.58-8.96-44.36-14.72-9.78-34.58-5.77-44.36 8.96L530.42 654.2c-9.77 14.72-5.76 34.58 8.96 44.36z"
                    p-id="16990"
                    fill="#ffffff"
                  ></path>
                </svg>
                <span>4.1万</span>
              </div>
            </div>
            <div class="video-img-time">
              <span>03:55</span>
            </div>
          </div>
          <div class="video-text">
            <p>如何优雅地把 4090 装进 ITX？ 这是我的答案</p>
          </div>
          <div class="video-author">
            <svg
              t="1668221134257"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="15862"
              width="14"
              height="14"
            >
              <path
                d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"
                p-id="15863"
              ></path>
              <path
                d="M419.2 544c0 51.2-3.2 108.8-83.2 108.8S252.8 595.2 252.8 544v-217.6H192v243.2c0 96 51.2 140.8 140.8 140.8 89.6 0 147.2-48 147.2-144v-240h-60.8V544zM710.4 326.4h-156.8V704h60.8v-147.2h96c102.4 0 121.6-67.2 121.6-115.2 0-44.8-19.2-115.2-121.6-115.2z m-3.2 179.2h-92.8V384h92.8c32 0 60.8 12.8 60.8 60.8 0 44.8-32 60.8-60.8 60.8z"
                p-id="15864"
              ></path>
            </svg>
            <span>立宗鸽鸽</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
import someList from "./static/someList.json";
export default {
  name: "AHome",
  data() {
    return {
      navList: [
        { name: "番剧" },
        { name: "国创" },
        { name: "综艺" },
        { name: "动画" },
        { name: "鬼畜" },
        { name: "舞蹈" },
        { name: "娱乐" },
        { name: "科技" },
        { name: "美食" },
        { name: "汽车" },
        { name: "运动" },
        { name: "电影" },
        { name: "电视剧" },
        { name: "纪录片" },
        { name: "游戏" },
        { name: "音乐" },
        { name: "影视" },
        { name: "知识" },
        { name: "资讯" },
        { name: "生活" },
        { name: "时尚" },
        { name: "更多" },
      ],
      someList: [],
      someRef: "",
      bannerColor: "#342c1f",
      bindex: -2,
      trackRef: "",
      dateList: [
        { name: "最近更新", isActive: true },
        { name: "周一", isActive: false },
        { name: "周二", isActive: false },
        { name: "周三", isActive: false },
        { name: "周四", isActive: false },
        { name: "周五", isActive: false },
        { name: "周六", isActive: false },
        { name: "周日", isActive: false },
      ],
      blankText: "",
      mySwiper: {},
    };
  },
  methods: {
    switchBtn(index) {
      this.dateList.forEach((item, i) => {
        item.isActive = false;
        if (index === i) {
          item.isActive = true;
        }
      });
    },
    blankPrev() {
      if (!this.mySwiper) return;
      this.bindex = this.bindex - 4;
      this.mySwiper.slidePrev();
    },
    blankNext() {
      if (!this.mySwiper) return;
      this.mySwiper.slideNext();
    },
  },
  created() {
    this.someList = someList;
  },
  mounted() {
    setTimeout(() => {
      this.mySwiper = new Swiper(this.$refs[this.someRef], {
        // direction: 'vertical', // 垂直切换选项
        disableOnInteraction: false,
        autoplay: true, // 循环模式选项
        loop: true,
        on: {
          slideChangeTransitionStart: () => {
            this.bindex = this.bindex + 2;
            if (this.bindex > (this.someList.length - 1) * 2) {
              this.bindex = 0;
            }
            if (this.bindex < 0) {
              this.bindex = (this.someList.length - 1) * 2;
            }
            // 排他
            this.someList.forEach((item, index) => {
              item.isBlankActive = false;
              if (index == this.bindex / 2) {
                item.isBlankActive = true;
                this.blankText = item.blankText;
              }
            });
            this.bannerColor = this.someList[this.bindex / 2].color;
          },
        },
      });
    });
  },
};
</script>

<style lang="less" scoped>
.container {
  min-width: 1395px;
  min-height: 500px;
  padding: 0 64px;
  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei,
    sans-serif !important;
  font-weight: 400;
  // margin: 20px 0;
  // border: 1px solid red;
}
.container-nav {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
  height: 70px;
}
.container-nav-left {
  display: flex;
  justify-content: space-evenly;
  margin-right: 8px;
}
.container-item {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #61666d;
  span {
    width: 46px;
    // text-align: center;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    // padding-top: 5px;
  }
}
.container-nav-item:hover {
  cursor: pointer;
  background: rgba(97, 102, 109, 0.3);
  svg {
    transform: rotate(180deg);
    transition: transform 0.3s;
  }
  .container-item-more-wrap {
    opacity: 1;
    transition: opacity 0.5s;
    display: flex;
  }
}
.container-item-more-wrap {
  position: absolute;
  top: 23px;
  right: 0;
  display: none;
  flex-wrap: wrap;
  z-index: 4;
  border-radius: 8px;
  padding: 10px;
}
.container-item-more {
  width: 120px;
  padding: 10px;
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  // opacity: 0;
  span {
    display: inline-block;
    width: 50%;
    padding: 3px;
    box-sizing: border-box;
    margin: 0 0 5px 0;
    &:hover {
      background: #eee;
      border-radius: 5px;
    }
  }
}
.class-item-yellow {
  width: 46px;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ff9212;
  border-radius: 50%;
  margin-right: 24px;
  margin-bottom: 5px;
}
.class-item-red {
  width: 46px;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f07775;
  border-radius: 50%;
  margin-right: 24px;
  margin-bottom: 5px;
}
.class-item-green {
  width: 46px;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #6cd083;
  border-radius: 50%;
  margin-right: 24px;
  margin-bottom: 5px;
}
.container-nav-center {
  display: flex;
  flex-wrap: wrap;
}
.container-nav-item {
  min-width: 70px;
  height: 28px;
  border: 1px solid #f1f2f3;
  box-sizing: border-box;
  margin: 0 5px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f1f2f3;
  border-radius: 6px;
  position: relative;
}

.container-nav-right {
  width: 240px;
  height: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #e3e5e7;
}
.right-top {
  display: flex;
  div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 28px;
    color: #61666d;
    svg {
      width: 20px;
      height: 20px;
      fill: #61666d;
    }
    span {
      font-size: 14px;
    }
  }
}
.right-button {
  display: flex;
  div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 28px;
    color: #61666d;
    svg {
      width: 20px;
      height: 20px;
      fill: #61666d;
    }
    span {
      font-size: 14px;
    }
  }
}
.container-body {
  width: 100%;
  height: 465px;
  // border: 1px solid red;
  display: flex;
}
.container-body-swiper {
  width: 556px;
  height: 62%;
  // overflow: hidden;
  // border: 1px solid green;
}
.container-body-right {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  // border: 1px solid black;
}
.swiper-container {
  height: 100%;
}

.swiper-slide {
  display: flex;
  flex-direction: column;
  justify-items: flex-start;
  // align-items: flex-start;
  img {
    width: 100%;
  }
}
.swiper-slide-blank {
  height: 81px;
  position: relative;
  z-index: 2;
}
.blank-ul {
  position: absolute;
  z-index: 3;
  bottom: 12px;
  left: 10px;
}
.blank-li {
  display: inline-block;
  position: relative;
  width: 8px;
  height: 8px;
  margin: 5px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  // overflow: hidden;
  cursor: pointer;
}
.before::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 6px;
  background-color: rgba(255, 255, 255);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  top: -2px;
  animation: before1 0.5s;
  transition: animation 1s;
}

.after::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 6px;
  background-color: rgba(255, 255, 255);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  bottom: -2px;
  animation: after1 0.5s;
  transition: animation 1s;
}

@keyframes after1 {
  0% {
    transform-origin: 6px 0px;
    transform: rotate(30deg);
  }

  33% {
    transform-origin: 6px 0px;
    transform: rotate(0deg);
  }

  66% {
    transform-origin: 6px 0px;
    transform: rotate(30deg);
  }

  100% {
    transform-origin: 6px 0px;
    transform: rotate(0deg);
  }
}
@keyframes before1 {
  0% {
    transform-origin: 6px 6px;
    transform: rotate(-30deg);
  }

  33% {
    transform-origin: 6px 6px;
    transform: rotate(0deg);
  }

  66% {
    transform-origin: 6px 6px;
    transform: rotate(-30deg);
  }

  100% {
    transform-origin: 6px 6px;
    transform: rotate(0deg);
  }
}

.blank-text {
  position: absolute;
  top: 8px;
  left: 15px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.blank-switch {
  position: absolute;
  top: 8px;
  right: 15px;

  button {
    border: none;
    width: 28px;
    height: 28px;
    line-height: 35px;
    background-color: rgba(255, 255, 255, 0.1);
    margin-left: 12px;
    border-radius: 8px;
    cursor: pointer;
    &:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }
  }
  // color: #fff;
  // font-size: 16px;
  // font-weight: 700;
}

.video-card__wrap {
  width: 273px;
  height: 222px;
  // border: 1px solid red;
  padding: 1px 2px;
  box-sizing: border-box;
  margin-left: 5px;
}
.video-img {
  position: relative;
  img {
    border-radius: 6px;
    width: 100%;
  }
}
.video-img-info {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 5px;
  display: flex;
  color: #fff;
  flex-wrap: nowrap;
}
.video-img-play {
  display: flex;
  margin-right: 8px;
  span {
    margin-left: 3px;
  }
}

.video-img-time {
  position: absolute;
  bottom: 10px;
  right: 5px;
  color: #fff;
}
.video-img-content {
  display: flex;
  span {
    margin-left: 3px;
  }
}
.video-text {
  p {
    line-height: 22px;
    font-weight: 600;
    letter-spacing: 1.5px;
    font-size: 14px;
  }
}
.video-author {
  display: flex;
  align-items: center;
  margin-top: 4px;
}
.swiper-container-wrap {
  border-radius: 6px;
  overflow: hidden;
}
.race-wrap {
  padding: 30px 0;
  border-top: 4px solid #f1f2f3;
  // border-bottom: 4px solid #f1f2f3;
}
.race-title {
  display: flex;
  align-items: center;
  vertical-align: middle;
  position: relative;
}
.area-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 12px;
  .race-font {
    font-size: 24px;
    padding-left: 10px;
  }
}
.track-switch-wrap {
  background: #f6f7f8;
  border-radius: 14px;
  margin: 0 0 8px 14px;
  button {
    // position: relative;
    border: none;
    padding: 6px 15px;
    border-radius: 14px;
    font-size: 12px;
    background: #f6f7f8;
    color: #6c6f75;
    cursor: pointer;
  }
}
.timeline-btn {
  position: absolute;
  right: 0;
  display: flex;
  margin-bottom: 8px;
  // flex-direction: row;
  a {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 0 8px;
    padding: 6px 10px;
    line-height: 16px;
    border: 1px solid #e3e5e7;
    background-color: #f6f7f8;
    transform-origin: center;
    transition: 0.2s;
    cursor: pointer;
    border-radius: 8px;
    color: #18191c;
  }
}
.race-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.is-active {
  background: #00aeec !important;
  color: #fff !important;
}
</style>
